<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i>后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增SPU</el-breadcrumb-item>
      <el-breadcrumb-item>第1步：选择商品类别</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="商品类别" prop="categoryId">
        <el-cascader
            style="width: 100%;"
            placeholder="请选择父级类别(必选)"
            :props="{ checkStrictly: true }"
            v-model="ruleForm.categoryId"
            :options="categoryTreeOptions"></el-cascader>
        <span>如果父级类别列表不准确，请点击 <a class="simple-link" href="#" @click="loadCategoryTree">这里</a> 刷新。</span>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

let localJwt = localStorage.getItem('localJwt');
import axios from "axios";

export default {
  data() {
    return {
      categoryTreeOptions : [],
      ruleForm: {
        categoryId : '',
        categoryName: ''
      },
      rules: {
        categoryId: [
          { required: true, message: '请商品类别', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    // 加载本地储存的表单数据
    loadLocalRuleForm() {
      let localRuleFormString = localStorage.getItem('localRuleForm');
      let localRuleForm = JSON.parse(localRuleFormString);
      if (localRuleForm && localRuleForm.categoryId) {
        this.ruleForm = localRuleForm;
      }
    },
    // 提交表单，到下一步
    submitForm(formName) {
      // 由于formData里面记录了从父级到自己的所有categoryId，我们只需要pop()删除并返回数组的最后一个元素
      if (Array.isArray(this.ruleForm.categoryId)) {
        this.ruleForm.categoryId = this.ruleForm.categoryId.pop();
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {

          let url = "http://localhost:8080/category/getStandardById/" + this.ruleForm.categoryId;
          this.axios
              .create({
                'headers': {
                  'Authorization': localJwt
                }
              })
              .get(url).then((response) => {
            let jsonResult = response.data;
            if (jsonResult.state === 200) {
              let category = jsonResult.data;
              if (category.isParent === 1) {
                let message = '错误，选择的类别必须不包含子级类别！';
                this.$alert(message, '警告',{
                  confirmButtonText: '确定',
                  callback: action => {
                  }
                });
              } else {
                this.ruleForm.categoryName = category.name;
                localStorage.setItem('localRuleForm', JSON.stringify(this.ruleForm));
                this.$router.push('add-new-2');
              }
            } else {
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                  this.loadCategoryTree();
                }
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    loadCategoryTree() {
      let url = "http://localhost:8080/category/tree";
      axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state === 200) {
          this.categoryTreeOptions = jsonResult.data;
          this.ruleForm.parentId = "0";
        }
      });
    }
  },
  mounted() {
    this.loadLocalRuleForm();
    this.loadCategoryTree();
  }
}
</script>
